import Vue,{PropOptions,VNode} from 'vue';
import Icon from '../icon';
/**
 * 输入类型
 */
export type InputType='text'|'password';
/**
 * 输入框形状
 */
export type ShapeType='square'|'round'|'noBorder';
/**
 * 输入框
 * @author 唐国雄
 * @date 2021/7/21
 * 属性----------------------
 * v-model			当前值, string
 * :type			输入类型, InputType
 * :shape			外形, ShapeType
 * :placeholder		占位文本, string
 * :disable			禁用, boolean
 * :readonly		只读, boolean
 * :clearable		可清空, boolean
 * :maxlength		最大输入长度, number
 * 事件----------------------
 * @input
 * @focus
 * @blur
 * 插槽----------------------
 * #prepend		前缀插槽
 * #append		后缀插槽
 */
export default Vue.extend({
	name:'Input',
	props:{
		//输入类型
		type:{
			type:String,
			default:'text',
			validator(v){
				return [
					'text',
					'password',
				].indexOf(v)!==-1;
			}
		} as PropOptions<InputType>,
		//外形
		shape:{
			type:String,
			default:'square',
			validator(v){
				return [
					'square',
					'round',
					'noBorder',
				].indexOf(v)!==-1;
			}
		} as PropOptions<ShapeType>,
		//当前值
		value:{
			type:String,
			required:true,
			default:'',
		},
		//占位文本
		placeholder:String,
		//禁用
		disable:Boolean,
		//只读
		readonly:Boolean,
		//可清空
		clearable:Boolean,
		//最大输入长度
		maxlength:Number,
	},
	data(){
		return {
			//是否聚焦输入框
			focus:false,
			//是否掩盖密码
			maskPassword:true,
		};
	},
	computed:{
		classes():string{
			return 'lexmis-Input'+
				` lexmis--${this.shape}`+
				(this.focus?' lexmis--focus':'')+
				(this.$scopedSlots.prepend?' lexmis--prepend':'')+
				(this.$scopedSlots.append?' lexmis--append':'')+
				(this.disable?' lexmis--disable':'')+
				(this.readonly?' lexmis--readonly':'');
		},
		//是否是真正的password类型
		passwordMode():boolean{
			return this.type==='password'&&this.maskPassword;
		},
	},
	render(h):VNode{
		const {prepend,append}=this.$scopedSlots;
		return h('div',{
			staticClass:this.classes,
		},[
			prepend
				?h('div',{
					staticClass:'lexmis_prepend'
				},prepend(undefined))
				:null,
			h('input',{
				attrs:{
					maxlength:this.maxlength,
					readonly:this.readonly,
				},
				domProps:{
					value:this.value,
					type:this.passwordMode?'password':'text',
					placeholder:this.placeholder,
					disabled:this.disable,
				},
				on:{
					input:(e:InputEvent) => {
						this.$emit('input',(e.target as HTMLInputElement).value);
					},
					focus:() => {
						this.focus=true;
						this.$emit('focus');
					},
					blur:() => {
						this.focus=false;
						this.$emit('blur');
					},
				}
			}),
			this.type==='password'&&this.value
				?h('div',{
					staticClass:'lexmis_append lexmis_inner'
				},[
					h(Icon,{
						props:{
							name:this.passwordMode?'visibility':'visibility_off'
						},
						on:{
							click:() => {
								this.maskPassword=!this.maskPassword;
							}
						}
					})
				])
				:this.clearable&&this.value&&!this.disable
					?h('div',{
						staticClass:'lexmis_append lexmis_inner'
					},[
						h(Icon,{
							props:{
								name:'cancel'
							},
							on:{
								click:() => {
									this.$emit('input','');
								}
							}
						})
					])
					:(
						append
							?h('div',{
								staticClass:'lexmis_append'
							},append(undefined))
							:null
					)
		]);
	},
});
